﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->

<!DOCTYPE html>
<html>
<head>
    <title>Navigation</title>
    <meta charset="utf-8" />
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.js" type="text/javascript"></script>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css">

    <link href="../../../common.css" rel="stylesheet" />
    <link href="navigation.css" rel="stylesheet" type="text/css" />

    <script src="navigation.js" type="text/javascript"></script>
    <script src="navigation.helper.js" type="text/javascript"></script>

</head>
<body>
    <main class="ms-navigation-dialog">
        <section class="ms-navigation-dialog__header ms-CommandBar">
            <div class="ms-navigation-dialog__tab ms-CommandBarItem">
                <a href="#" class="ms-navigation-dialog__tab-link ms-navigation-dialog__tab-link--active ms-CommandBarItem-link ms-font-m ms-font-weight-light" data-tab="Page1" tabindex="1">Page 1</a>
            </div>
            <div class="ms-navigation-dialog__tab ms-CommandBarItem">
                <a href="#" class="ms-navigation-dialog__tab-link ms-CommandBarItem-link ms-font-m ms-font-weight-light" data-tab="Page2" tabindex="1"> Page 2</a>
            </div>
            <div class="ms-navigation-dialog__tab ms-CommandBarItem">
                <a href="#" class="ms-navigation-dialog__tab-link ms-CommandBarItem-link ms-font-m ms-font-weight-light" data-tab="Page3" tabindex="1"> Page 3 </a>
            </div>
            <div class="ms-navigation-dialog__tab ms-CommandBarItem">
                <a href="#" class="ms-navigation-dialog__tab-link ms-CommandBarItem-link ms-font-m ms-font-weight-light" data-tab="Page4" tabindex="1"> Page 4</a>
            </div>
        </section>
        <section class="ms-navigation-dialog__content">
            <div id="Page1" class="ms-navigation-dialog__tabcontent ms-navigation-dialog__tabcontent--active">
                <p class="ms-font-xl">Page 1 Title</p>
            </div>

            <div id="Page2" class="ms-navigation-dialog__tabcontent">
                <p class="ms-font-xl">Page 2 Title</p>
            </div>

            <div id="Page3" class="ms-navigation-dialog__tabcontent">
                <p class="ms-font-xl">Page 3 Title</p>
            </div>

            <div id="Page4" class="ms-navigation-dialog__tabcontent">
                <p class="ms-font-xl">Page 4 Title</p>
            </div>
        </section>
        <div class="ms-navigation-dialog__actions ms-Dialog-actions">
            <div class="ms-Dialog-actionsRight">
                <button class="ms-Dialog-action ms-Button ms-Button--primary" id="ok-button">
                    <span class="ms-Button-label">OK</span>
                    <span class="ms-Button-description">Click OK to continue</span>
                </button>
                <button class="ms-Dialog-action ms-Button" id="cancel-button">
                    <span class="ms-Button-label">Cancel</span>
                    <span class="ms-Button-description">Click to cancel</span>
                </button>
            </div>
        </div>
    </main>    
</body>
</html>
